<template>
  <codemirror
      v-model="code"
      :style="{ height: '400px' }"
      :autofocus="true"
      :indent-with-tab="true"
      :tab-size="2"
      :extensions="extensions"
  />
</template>

<script setup>
import { ref } from 'vue'
import { Codemirror } from 'vue-codemirror'
import {MySQL, sql} from "@codemirror/lang-sql";
import { oneDark } from '@codemirror/theme-one-dark'
import { autocompletion } from '@codemirror/autocomplete';


// // 自定义SQL关键字和表名提示
// const sqlCompletions = [
//   { label: 'SELECT', type: 'keyword' },
//   { label: 'FROM', type: 'keyword' },
//   { label: 'WHERE', type: 'keyword' },
//   { label: 'JOIN', type: 'keyword' },
//   { label: 'users', type: 'table' },
//   { label: 'orders', type: 'table' },
//   { label: 'id', type: 'column', detail: 'users.id' },
//   { label: 'name', type: 'column', detail: 'users.name' },
// ];
//
// // 自定义提示函数
// const sqlAutocomplete = autocompletion({
//   override: [
//     (context) => {
//       const word = context.matchBefore(/\w*/);
//       if (!word) return null;
//       return {
//         from: word.from,
//         options: sqlCompletions.map((item) => ({
//           label: item.label,
//           type: item.type,
//           detail: item.detail,
//         })),
//       };
//     },
//   ],
// });


const code = ref('SELECT T.* FROM  table1 AS T')
const extensions = [sql({ dialect: MySQL }), oneDark]
// const extensions = [sql({ dialect: MySQL }), sqlAutocomplete, oneDark]
// const code = ref('console.log("Hello, world!")')
// const extensions = [javascript(), oneDark]
</script>